<template>
  <div class="container">
    <van-collapse v-model="activeNames">
      <van-collapse-item :title="title" name="1">
        <slot></slot>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  name: 'InfoPanelGroup',
  props: {
    title: String
  },
  data() {
    return {
      activeNames: ['1'],
    };
  },
}
</script>

<style lang="less" scoped>
.container {
  margin: 6px auto;
  width: 350px;
  border-radius: 8px;
  box-shadow: 0 0 2px #80808047;
  /deep/ .van-cell {
    border-radius: 5px;
  }
  /deep/ .van-collapse-item__content {
    padding: 0;
  }
  /deep/ .van-cell__title {
    span {
      font-weight: bold;
    }
  }
  :deep(.van-collapse-item__wrapper) {
    border-radius: 8px;
  }
}
</style>